<template>
    <div>
    <h2>今日请假明细</h2>
    <div class="table"> 
        <el-table :data="list" border style="width: 100%"  :header-cell-style="{ background: '#6eaef5', color: '#ffffff','text-align':'center' }"
      :cell-style="{'text-align':'center'}">
                <el-table-column label="姓名" align="center" prop="nickName" />
                <el-table-column label="部门" align="center" prop="dept" />
                <el-table-column label="事由" align="center" prop="remark" />
        </el-table>
    </div>
   </div>
</template>
<script>
import dayjs from 'dayjs'
import { listDuty, getDuty, delDuty, addDuty, updateDuty } from "@/api/system/duty";
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user";

export default {
    data() {
        return {
            query: {
                offdutyStat: 1,
                offdutyDate: dayjs(new Date()).format('YYYY-MM-DD'),
            },
            list: [],
        };
    },
    mounted() { },
    methods: {
        async getToDayDuty() {
              listDuty(this.query).then(res=>{
                // console.log(res)
              res.rows.forEach(async(item)=>{
             let deptlist= await listUser({userName:item.userName})
            //  使用$set给请假列表添加一个响应式部门属性，
             this.$set(item, 'dept', deptlist.rows[0].dept.deptName)
              })
            //   console.log(res);
              this.list=res.rows
              })
        }
    },
    components: {},
    props: {},
    watch: {},
    computed: {},
    created() { 
        this.getToDayDuty()
    },
};
</script>
<style lang="scss" scoped>
h2{
    text-align: center;
}
.table{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    width: 50%;
    // border: 1px red solid;
    margin: 50px auto;
    text-align: center;
}
</style>